<template>
  <div class="cityOuter">
    <header class="header fix">
      <a href="javascript:;" class="backImg" @click="train"></a>
      <span class="selStation">{{selStation}}</span>
    </header>
    <div class="titleItem">
      <input type="text" placeholder="请输入车站名/拼音/首字母" v-model.trim="cityName" @input="change($event)" class="cityInput"/>
    </div>
    <div class="hotBox" v-show="show">
      <div class="currentItem">
        <p class="currentItemsub">热门城市</p>
        <div class="currentItemsubInfo">
          <li class="cityItem" v-for="(hotItem,index) in hotItems" @click="flightIndex(index)">
            {{hotItem.nameCn}}
          </li>
        </div>
      </div>
    </div>
    <div class="selectBox" v-show="!show">
      <ul>
        <li class="city-itme" v-for="(selItem,index) in selItems" @click="flightIndex1(index)">
          {{selItem.nameCn}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import train from '@/data/train';
  export default {
    data () {
      return {
        selStation: '选择城市',
        show: true,
        goTem:'',
        backTem:'',
        cityName: '',
        hotItems: [
          {
          }
        ],
        selItems: [
          {
          }]
      }
    },
    methods: {
      change (e, show) {
        var that = this;
        that.value = e.target.value;
        if (that.value == '') {
          that.show = true;
        } else {
          train.trainCityList({
            cityName: that.value
          }, function (res) {
            that.show = false;
            that.selItems = res;
          }, function (res) {
            $trainTool.errorToIndex(that);
          })
        }
      },
      train(){
        this.$router.go(-1);
      },
      flightIndex(index){
        if (this.go == 'go') {
          this.$store.state.train.go = this.hotItems[index].nameCn.replace('市', '');
          this.$store.state.train.fromCityCode = this.hotItems[index].id;
          this.$store.state.train.onlyOne = 2
          this.$router.go(-1);
        }
        if (this.go == 'back') {
          this.$store.state.train.back = this.hotItems[index].nameCn.replace('市', '');
          this.$store.state.train.toCityCode = this.hotItems[index].id;
          this.$store.state.train.onlyOne = 2
          this.$router.go(-1);
        }
      },
      flightIndex1(index){
        if (this.go == 'go') {
          this.$store.state.train.go = this.selItems[index].nameCn.replace('市', '');
          this.$store.state.train.fromCityCode = this.selItems[index].id;
          this.$store.state.train.onlyOne = 2
          this.$router.go(-1);
        }
        if (this.go == 'back') {
          this.$store.state.train.back = this.selItems[index].nameCn.replace('市', '');
          this.$store.state.train.toCityCode = this.selItems[index].id;
          this.$store.state.train.onlyOne = 2
          this.$router.go(-1);
        }
      },
      getHotCity() {
        let that = this;
        // 初始化调用热门城市接口
        if(that.$store.state.train.hotCityName <= 0) {
          train.trainCityList({
            hotCityName: '',
            isHotCity: true
          }, res => {
            that.hotItems = res;
            that.$store.state.train.hotCityName = res;
          }, err => {
            $trainTool.errorToIndex(that)
          })
        } else {
          that.hotItems =  that.$store.state.train.hotCityName;
        }
      },
    },
    created() {
      this.getHotCity();
    },
    mounted(){
      this.go = this.$route.query.go;
    }
  }
</script>

<style scoped>
  .header {
    background-color: #46a1bb;
    height: 2.2rem;
    background-size: cover;
    font-size: .8rem;
    color: #fff;
    width: 100%;
    display: flex;
    box-sizing: border-box;
    padding: 0 .75rem;
    box-sizing: border-box;
  }
  .backImg {
    float: left;
    flex: 0 0 20%;
    height: 2.2rem;
    line-height: 2.2rem;
    text-align: left;
    background: url('../../assets/images/back.png') no-repeat left center;
    background-size: .6rem 1.1rem;
  }
  .selStation {
    float: left;
    line-height: 2.2rem;
    flex: 0 0 60%;
    text-align: center;
  }
  .cityOuter {
    width: 100%;
    font-size: .75rem;
    background: #f0f0f0;
  }
  .selectBox {
    margin-top: .25rem;
    background: #fff;
    padding-left: .7rem;
    padding-right: .7rem;
    padding-top: 1.5rem;
  }
  .selectBox ul {
    width: 100%;
  }
  .cityInput {
    width: 100%;
    height: 2.5rem;
    font-size: .75rem;
    padding-left: .7rem;
    border: none;
  }
  .titleItem {
    width: 100%;
    overflow: hidden;
  }
  .currentItem {
    background-color: #fff;
  }
  .currentItemsub {
    margin: .25rem 0 .5rem .7rem;
    padding-top: .5rem;
  }

  .currentItemsubInfo {
    border-bottom: 1px solid #f0f0f0;
  }

  .cityItem {
    width: 25%;
    text-align: center;
    display: inline-block;
    line-height: 2rem;
    margin-bottom: .25rem;
  }
  .city-itme{
    width: 23.5%;
    margin-right: 2%;
    text-align: center;
    display: inline-block;
    padding: .5rem 0;
    border: 1px solid #46a1bb;
    border-radius: .05rem;
    margin-bottom: 1rem;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .city-itme:nth-child(4n) {
    margin-right: 0;
  }
</style>
